import React from 'react';
import { Row } from 'antd';
import { useNavigate } from "react-router-dom";
import images1 from './bigTypeImgs/1.jpg';
import images2 from './bigTypeImgs/2.jpg';
import images3 from './bigTypeImgs/3.jpg';
import images4 from './bigTypeImgs/4.jpg';
import images5 from './bigTypeImgs/5.jpg';
import images6 from './bigTypeImgs/6.jpg';
import images7 from './bigTypeImgs/7.jpg';
import images8 from './bigTypeImgs/8.jpg';
import images9 from './bigTypeImgs/9.jpg';
import images10 from './bigTypeImgs/10.jpg';
import './fenlei.css';

const Fenlei = () => {
    const navigate = useNavigate();

    const goToProductDetails = () => {
        navigate(`/productCategory`);
    };

    return (
        <div className='index_bigType' onClick={goToProductDetails}>
            <Row>
                <img src={images1} className='images' alt='1'></img>
                <img src={images2} className='images' alt='2'></img>
                <img src={images3} className='images' alt='3'></img>
                <img src={images4} className='images' alt='4'></img>
                <img src={images5} className='images' alt='5'></img>
            </Row>

            <Row>
                <img src={images6} className='images' alt='6'></img>
                <img src={images7} className='images' alt='7'></img>
                <img src={images8} className='images' alt='8'></img>
                <img src={images9} className='images' alt='9'></img>
                <img src={images10} className='images' alt='10'></img>
            </Row>
        </div>
    );
};

export default Fenlei;